<template>
    <orh-table reload  @on-reload="reload" ref="htmlHeight">
        <Button type="primary" size="small" @click="submits" slot="returntosuperior">备课组升学年</Button>
        <Table border stripe :height="height" :loading="tableload" slot="table" :columns="columns" :data="data"></Table>
    </orh-table>
</template>
                
<script>
export default {
    components: {
    },
    data () {
        return {
            tableload: true,
            data: [],
            height: 0,
            columns: [
                {
                    title: '部门',
                    align: 'center',
                    minWidth: 100,
                    render: (h, params) => {
                        let department_name = params.row.department_name.zh?params.row.department_name.zh:params.row.department_name.mn;
                        return h('div', department_name);
                    },
                },
                {
                    title: '当前年级',
                    align: 'center',
                    minWidth: 100,
                    render: (h, params) => {
                        let name = params.row.grades
                        let value = ''
                        if (name == null) {
                            value  = ''
                        } else {
                            name.forEach((el, a) => {
                                value += a != 0?'，' + el.grade_name.zh:el.grade_name.zh
                            });
                        }
                        
                        return h('div', value)
                    }
                },
                {
                    title: '下一年级',
                    align: 'center',
                    minWidth: 100,
                    render: (h, params) => {
                        return h('CheckboxGroup', {
                            props: {
                                value: this.data[params.index].info,
                            },
                            on: {
                                'on-change':(event) => {
                                    this.data[params.index].info = event
                                }
                            }
                        },
                        this.gradeList.map(function(item){
                            return h('Checkbox', {
                                props: {label: item.id}
                            }, item.grade_name.zh?item.grade_name.zh:item.grade_name.mn);
                        }))
                    }
                },
                {
                    title: '录入名称',
                    align: 'center',
                    minWidth: 100,
                    render: (h, params) => {
                        let vm = this
                        return h('div',{
                            style: {
                                height: '100px',
                                padding: '5px 0'
                            }
                        }, [
                            h('div', {
                                style: {
                                    height: '30px',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }
                            }, [
                                h('Input', {
                                    props:{
                                        type: 'text',
                                        size: "small",
                                        value: vm.data[params.index].newname.zh
                                    },
                                    on:{
                                        'on-blur':(event) => {
                                            vm.data[params.index].newname.zh = event.target.value;
                                        }
                                    },
                                }, [
                                    h('span', {
                                        slot: 'prepend',
                                    }, '中文名称')
                                ])
                            ]),
                            h('div', {
                                style: {
                                    height: '30px',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }
                            }, [
                                h('Input', {
                                    props:{
                                        type: 'text',
                                        size: "small",
                                        value: vm.data[params.index].newname.mn
                                    },
                                    on:{
                                        'on-blur':(event) => {
                                            vm.data[params.index].newname.mn = event.target.value;
                                        }
                                    },
                                }, [
                                    h('span', {
                                        slot: 'prepend',
                                    }, '蒙文名称')
                                ])
                            ]),
                            h('div', {
                                style: {
                                    height: '30px',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }
                            }, [
                                h('Input', {
                                    props:{
                                        type: 'text',
                                        size: "small",
                                        value: vm.data[params.index].newname.en
                                    },
                                    on:{
                                        'on-blur':(event) => {
                                            vm.data[params.index].newname.en = event.target.value;
                                        }
                                    },
                                }, [
                                    h('span', {
                                        slot: 'prepend',
                                    }, '英文名称')
                                ])
                            ]),
                        ])
                    }
                },
            ],
            url: 'api/user/v1/department/rise/preparation/department/list',
            curl: 'api/user/v1/department/rise/preparation/department/rise',
            gUrl: 'api/base/v1/get/grade/list',
            gradeList: [],
            condition: null,
        }
    },
    methods: {
        inputChange (data, index) {
            this.data[index].info = data
        },

        // ==================================================
        // 确定提交
        // ==================================================
        submits(){
            let datas = {
                department_data: []
            }
            for (let i = 0; i < this.data.length; i++) {
                if (this.data[i].newname.zh == null) {
                    this.$Message.warning('请填写全部信息！');
                    return;
                } else if (this.data[i].newname.mn == null) {
                    this.$Message.warning('请填写全部信息！');
                    return;
                } else if (this.data[i].newname.en == null) {
                    this.$Message.warning('请填写全部信息！');
                    return;
                } else {
                }
                datas.department_data.push({
                    id: this.data[i].id,
                    grade: this.data[i].info,
                    name: this.data[i].newname
                })
            }
            this.$Modal.confirm({
                title: '是否确认',
                content: '<p>备课组升学年？</p>',
                loading: true,
                onOk: () => {
                    this.$http.post(this.curl, datas).then(val=>{
                        this.$Modal.remove();
                    }).catch(err => {
                    })
                }
            });
        },

        // ==================================================
        // 手动刷新
        // ==================================================
        reload(){
            this.data = []
            this.tableload = true
            this.queryData()
        },

        // ==================================================
        // 列表高度
        // ==================================================
        styleData (){
            let a = this.$refs.htmlHeight.$el.offsetHeight
            this.height = a - 130
        },

        // ==================================================
        // 请求数据
        // ==================================================
        queryData(){
            this.$http.get(this.url).then(val=>{
                this.styleData()
                let arr = []
                val.data.forEach(el => {
                    let info = []
                    el.newname = {
                        zh: null,
                        mn: null,
                        en: null
                    }
                    if (el.next_grades != null) {
                        el.next_grades.forEach(item => {
                            info.push(item.id)
                        })
                    }
                    el.info = info
                    arr.push(el)
                });
                this.data = arr
                this.tableload = false
            }).catch(err => {
                this.tableload = false
            })
        },

        // ==================================================
        // 请求数据
        // ==================================================
        qugradeData(){
            this.$http.get(this.gUrl).then(val=>{
                this.gradeList = val.data
            }).catch(err => {
            })
        },
    },
    created(){
        this.queryData()
        this.qugradeData()
    },
};
</script>

